<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端工具集</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome Icons (Local) -->
    <link href="/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!-- Tailwind Config -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#3B82F6',
              secondary: '#10B981',
              accent: '#8B5CF6',
              dark: '#1E293B',
              light: '#F8FAFC',
            },
            fontFamily: {
              inter: ['Inter', 'system-ui', 'sans-serif'],
            },
          },
        },
        darkMode: 'class',
      }
    </script>
    <!-- Utility classes used by the tools grid and modal -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto { content-visibility: auto; }
        .tool-card-hover { @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1; }
        .modal-animation { @apply transition-all duration-300 ease-in-out; }
        .glass-effect { @apply bg-white/80 dark:bg-dark/80 backdrop-blur-md; }
      }
    </style>
    <style>
      /* basic fade-in animation */
      @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
      .animate-fade-in { animation: fadeIn 0.3s ease-in-out; }
      /* custom scrollbar */
      ::-webkit-scrollbar { width: 8px; height: 8px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
      ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
      .dark ::-webkit-scrollbar-thumb { background: #334155; }
      .dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
